<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Button 按钮</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<script src="../static/js/icons_antd.js"></script>
<style>
.but-icon {
	/* width: 20px; */
	/* height: 16px; */
	width: 1em;
	height: 1em;
}
.button-icon > svg{
	width: 20px;
}

.button-icon2{
	display: flex;
	align-items: center;
}
.button-icon2 > svg{
	width: 16px;
	margin-right: 4px;
}

.button-icon3{
	display: flex;
	align-items: center;
}
.button-icon3 > svg{
	width: 20px;
	/* margin-right: 4px; */
}
</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">按钮类型</a-divider><!-- =============================================================== -->
	<p class="desc">按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次（实测能多次出现）。</p>
	<a-space wrap>
		<a-button type="primary" @click="hasClick()">Primary Button</a-button>
		<a-button type="primary">Primary Button2</a-button>
		<a-button>Default Button</a-button>
		<a-button type="dashed">Dashed Button</a-button>
		<a-button type="text">Text Button</a-button>
		<a-button type="link">Link Button</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">幽灵按钮</a-divider><!-- =============================================================== -->
	<p class="desc">幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。</p>
	<div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }">
	<!-- <div :style="{ background: 'rgb(255, 255, 255)', padding: '16px 16px' }"> -->
		<a-space>
			<a-button type="primary" ghost>Primary</a-button>
			<a-button ghost>Default</a-button>
			<a-button type="dashed" ghost>Dashed</a-button>
			<a-button type="primary" danger ghost>Danger</a-button>
		</a-space>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">加载状态</a-divider><!-- =============================================================== -->
	<p class="desc">添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。</p>
	<a-space direction="vertical">
		<a-space>
			<a-button type="primary" loading>Loading</a-button>
			<a-button type="primary" size="small" loading>Loading</a-button>
		</a-space>
		<a-space>
			<a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
			<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
				<!-- <template #icon><aim class="but-icon"></aim></template> -->
				<template #icon><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><aim class="but-icon"></aim></span></template>
				延迟1s
			</a-button>
		</a-space>
		<a-space>
			<a-button type="primary" loading></a-button>
			<a-button type="primary" shape="circle" loading></a-button>
			<a-button type="" shape="circle" loading></a-button>
			<a-button shape="circle" loading></a-button>
			<a-button danger shape="round" loading></a-button>
		</a-space>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">按钮尺寸</a-divider><!-- =============================================================== -->
	<p class="desc">按钮有大、中、小三种尺寸。</p>
	<p class="desc">通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="size">
			<a-radio-button value="large">Large</a-radio-button>
			<a-radio-button value="default">Default</a-radio-button>
			<a-radio-button value="small">Small</a-radio-button>
		</a-radio-group>
		<a-space>
			<a-button type="primary" :size="size">Primary</a-button>
			<a-button :size="size">Normal</a-button>
			<a-button type="dashed" :size="size">Dashed</a-button>
			<a-button danger :size="size">Danger</a-button>
			<a-button type="link" :size="size">Link</a-button>
		</a-space>
		<a-space>
			<a-button type="primary" :size="size">
				<template #icon><download class="aut-icon"></download></template>
			</a-button>
			<a-button type="primary" shape="circle" :size="size">
				<template #icon><download class="aut-icon"></download></template>
			</a-button>
			<a-button type="primary" shape="round" :size="size">
				<template #icon><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><download class="aut-icon"></download></span></template>
				下载
			</a-button>
			<a-button type="primary" shape="round" :size="size">
				<template #icon><download class="aut-icon"></download></template>
			</a-button>
			<a-button type="primary" :size="size">
				<template #icon><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><download class="aut-icon"></download></span></template>
				下载
			</a-button>
		</a-space>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">危险按钮</a-divider><!-- =============================================================== -->
	<p class="desc">在 2.2.0 之后，危险成为一种按钮属性而不是按钮类型。</p>
	<a-space warp>
		<a-button type="primary" danger>Primary</a-button>
		<a-button danger>Default</a-button>
		<a-button type="dashed" danger>Dashed</a-button>
		<a-button type="text" danger>Text</a-button>
		<a-button type="link" danger>Link</a-button>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">禁用状态</a-divider><!-- =============================================================== -->
	<p class="desc">添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。</p>
	<a-space direction="vertical">
		<a-space>
			<a-button type="primary">Primary</a-button>
			<a-button type="primary" disabled>Primary(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button>Default</a-button>
			<a-button disabled>Default(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button type="dashed">Dashed</a-button>
			<a-button type="dashed" disabled>Dashed(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button type="text">Text</a-button>
			<a-button type="text" disabled>Text(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button type="link">Link</a-button>
			<a-button type="link" disabled>Link(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button danger>Danger Default</a-button>
			<a-button danger disabled>Danger Default(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button danger type="text">Danger Text</a-button>
			<a-button danger type="text" disabled>Danger Text(disabled)</a-button>
		</a-space>
		<a-space>
			<a-button danger type="link">Danger Link</a-button>
			<a-button danger type="link" disabled>Danger Link(disabled)</a-button>
		</a-space>
		<div :style="{ padding: '8px', background: 'rgb(190, 200, 200)' }">
			<a-space>
				<a-button ghost>Ghost</a-button>
				<a-button ghost disabled>Ghost(disabled)</a-button>
			</a-space>
		</div>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">图标按钮</a-divider><!-- =============================================================== -->
	<p class="desc">当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。</p>
	<p class="desc">如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。</p>
	<a-space direction="vertical">
		<a-space warp>
			<a-tooltip title="search">
				<a-button type="primary" shape="circle" :icon="Vue.h(Icons.Search)" class="button-icon"></a-button>
			</a-tooltip>
			<a-button type="primary" shape="circle">A</a-button>
			<a-tooltip title="search222">
				<a-button shape="circle" :icon="Vue.h(Icons.Search)" class="button-icon"></a-button>
			</a-tooltip>
			<a-button type="primary" :icon="Vue.h(Icons.Search)" class="button-icon2">Search</a-button>
			<a-button :icon="Vue.h(Icons.Search)" class="button-icon2">Search</a-button>
			<a-button type="primary" class="icon-center">
				<template #icon><radius-upleft-outlined></radius-upleft-outlined></template>topLeft
			</a-button>
			<a-button type="primary" class="icon-center">
				<template #icon><Search-Outlined></Search-Outlined></template>topLeft
			</a-button>
		</a-space>
		<a-space warp>
			<a-tooltip title="search">
				<a-button shape="circle" :icon="Vue.h(Icons.Search)" class="button-icon"></a-button>
			</a-tooltip>
			<a-button :icon="Vue.h(Icons.Search)" class="button-icon2">Search</a-button>
			<a-tooltip title="search">
				<a-button type="dashed" shape="circle" :icon="Vue.h(Icons.Search)" class="button-icon"></a-button>
			</a-tooltip>
			<a-button type="dashed" :icon="Vue.h(Icons.Search)" class="button-icon2">Search</a-button>
			<a-button :icon="Vue.h(Icons.Search)" href="https://www.baidu.com" class="button-icon"></a-button>
		</a-space>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">多个按钮组合</a-divider><!-- =============================================================== -->
	<p class="desc">按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。</p>
	<a-space>
		<a-button type="primary">Primary</a-button>
		<a-button>secondary</a-button>
		<a-dropdown>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">1st item</a-menu-item>
					<a-menu-item key="2">2nd item</a-menu-item>
					<a-menu-item key="3">3rd item</a-menu-item>
				</a-menu>
			</template>
			<a-button class="button-icon3">
				Actions
				<arrow-down-bold class="aut-icon"></arrow-down-bold>
			</a-button>
		</a-dropdown>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">block按钮</a-divider><!-- =============================================================== -->
	<p class="desc">block 属性将使按钮适合其父宽度。</p>
	<a-space wrap>
		<a-button type="primary" block>Primary</a-button>
		<a-button block>Default</a-button>
		<a-button type="dashed" block>Dashed</a-button>
		<a-button danger block>Danger</a-button>
		<a-button type="link" block>Link</a-button>
	</a-space>
	<div style="width: 500px;margin-top: 20px;">
		<a-button type="primary" block>Primary（父盒子有多宽，我就多宽）</a-button>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">API#</a-divider><!-- =============================================================== -->
API#
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。
按钮的属性说明如下：
属性	说明	类型	默认值	版本
block	将按钮宽度调整为其父宽度的选项	boolean	false	
danger	设置危险按钮	boolean	false	2.2.0
disabled	按钮失效状态	boolean	false	
ghost	幽灵属性，使按钮背景透明	boolean	false	
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-	
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button	
icon	设置按钮的图标类型	v-slot	-	
loading	设置按钮载入状态	boolean | { delay: number }	false	
shape	设置按钮形状	default | circle | round	default	
size	设置按钮大小	large | middle | small	middle	
target	相当于 a 链接的 target 属性，href 存在时生效	string	-	
type	设置按钮类型	primary | ghost | dashed | link | text | default	default	

事件 #
事件名称	说明	回调参数	版本
click	点击按钮时的回调	(event) => void	
支持原生 button 的其他所有属性。

方法 #
Button #
名称	描述	版本
blur()	移除焦点	
focus()	获取焦点
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
// console.log(ElementPlusIconsVue.Search);
const Main = {
data() {
	return {
		Vue: Vue,
		Icons: ElementPlusIconsVue,
		message: 'Hello Vue!!',
		loading: false,
		iconLoading: false,
		
		size: 'large',
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	enterIconLoading(){
		setTimeout(() => {
			this.iconLoading = true;
		}, 500);
		
		setTimeout(() => {
			this.iconLoading = false;
		}, 2000);
		// console.log(3333);
	},
	handleMenuClick(e){
		console.log('handleMenuClick', e);
	},
	hasClick(){
		console.log('点击了按钮。。');
	},
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
